<template>
  <view class="lite-empty">
    <view class="lite-empty__image">
      <image v-if="icon && icon.startsWith('/')" 
             :src="icon" 
             class="empty-icon-image"
             mode="aspectFit" />
      <text v-else class="empty-icon-text">📭</text>
    </view>
    <text class="lite-empty__text">{{ text }}</text>
  </view>
</template>

<script>
export default {
  name: 'LiteEmpty',
  props: {
    text: {
      type: String,
      default: '暂无数据'
    },
    icon: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'data' // data, news, etc.
    }
  }
}
</script>

<style scoped>
.lite-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999999;
}

.lite-empty__image {
  margin-bottom: 16px;
}

.empty-icon-image {
  width: 80px;
  height: 80px;
}

.empty-icon-text {
  font-size: 48px;
  opacity: 0.6;
}

.lite-empty__text {
  font-size: 14px;
  color: #999999;
  text-align: center;
}
</style>